import React, { Component } from 'react';
import _ from 'lodash';
import { BaseTable, utils, NumberView, DifferenceDisplayer } from '@/components/BaseTable';

const company = '金额 (万元)';

export default class AnnualIndicators extends Component {
  state = {};

  buildTitleTree = props => {
    const titleTree = [
      {
        name: '年初存货',
        key: 'yearEarlyInventoryAmount',
        dataKey: 'yearEarlyInventoryAmount',
        title: company,
        colspan: 1 * 1,
        width: 200,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.yearEarlyInventoryAmount / 10000,
        cellRenderer: rowData => (
          <div style={{ width: '100%', textAlign: 'center' }}>
            <NumberView precision={0} {...rowData} />
          </div>
        ),
      },
      {
        name: '年度新供',
        key: 'yearNewSupplyAmount',
        dataKey: 'yearNewSupplyAmount',
        title: company,
        colspan: 1 * 1,
        width: 200,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.yearNewSupplyAmount / 10000,
        cellRenderer: rowData => <NumberView precision={0} {...rowData} />,
      },
      {
        name: '年度总可售',
        key: 'yearTotalSalableAmount',
        dataKey: 'yearTotalSalableAmount',
        title: company,
        colspan: 1 * 1,
        width: 200,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.yearTotalSalableAmount / 10000,
        cellRenderer: rowData => <NumberView precision={0} {...rowData} />,
      },
      {
        name: '年度签约目标',
        key: 'yearSigningTargetAmount',
        dataKey: 'yearSigningTargetAmount',
        title: company,
        colspan: 1 * 1,
        width: 200,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.yearSigningTargetAmount / 10000,
        cellRenderer: rowData => <NumberView precision={0} {...rowData} />,
      },
      {
        name: '年度综合去化率',
        key: 'yearComprehensiveRate',
        dataKey: 'yearComprehensiveRate',
        title: '( % )',
        colspan: 1 * 1,
        width: 200,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.yearComprehensiveRate / 1,
        cellRenderer: rowData => (
          <>
            <NumberView precision={2} {...rowData} />%
          </>
        ),
      },
      {
        name: '年度结转去化率',
        key: 'yearCarryForwardRate',
        dataKey: 'yearCarryForwardRate',
        title: '( % )',
        colspan: 1 * 1,
        width: 200,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.yearCarryForwardRate / 1,
        cellRenderer: rowData => (
          <>
            <NumberView precision={2} {...rowData} />%
          </>
        ),
      },
      {
        name: '周转系数',
        key: 'turnoverCoefficient',
        dataKey: 'turnoverCoefficient',
        colspan: 1,
        rowspan: 2,
        width: 200,
        align: 'right',
        dataGetter: ({ rowData }) => rowData.turnoverCoefficient / 1,
        cellRenderer: rowData => <NumberView precision={1} {...rowData} />,
      },
    ];
    if (props && !_.isDate(props.differencesDto)) {
      _.forEach(props.differencesDto, item => {
        const { name } = item;
        titleTree.push({
          name: `VS ${name}`,
          key: `${name}difference`,
          dataKey: `${name}difference`,
          title: company,
          colspan: 1,
          rowspan: 1,
          width: 180,
          dataGetter: () => {
            let obj = {};
            obj = {
              value: _.toNumber(`${item.amount}`.replace('%', '')) / 10000,
              percentage: _.toNumber(`${item.rate}`.replace('%', '')),
            };
            return obj;
          },
          cellRenderer: <DifferenceDisplayer precision={0} />,
        });
      });
    }

    return titleTree;
  };

  render() {
    const titleTree = this.buildTitleTree(this.props.yearIndex);
    const headerRenderer = utils.getHeaderRenderer(titleTree, 1);
    return (
      <BaseTable
        expandColumnKey="name"
        fixHeight={100}
        columns={titleTree}
        headerHeight={[30, 30]}
        headerRenderer={headerRenderer}
        treeData={[this.props.yearIndex]}
      />
    );
  }
}
